<template>
  <div id="app">
    <h2>测试题</h2>
    <subject 
    v-for="item in arr" 
    :key="item.id"
    :item="item"
    @sub="subMT"
    ></subject>
    <div>
      <flag 
      v-for="item in arr" 
      :key="item.id"
      :item="item"
      ></flag>
    </div>
  </div>
</template>

<script>
import Subject from './components/Subject.vue'
import Flag from './components/Flag.vue'

export default {
  components: {
    Subject,
    Flag
  },
  data() {
    return {
      arr: [
        {
          id: 1,
          random1: parseInt(Math.random() * 10),
          random2: parseInt(Math.random() * 10),
          state: '未完成'
        },
        {
          id: 2,
          random1: parseInt(Math.random() * 10),
          random2: parseInt(Math.random() * 10),
          state: '未完成'
        },
        {
          id: 3,
          random1: parseInt(Math.random() * 10),
          random2: parseInt(Math.random() * 10),
          state: '未完成'
        },
        {
          id: 4,
          random1: parseInt(Math.random() * 10),
          random2: parseInt(Math.random() * 10),
          state: '未完成'
        },
        {
          id: 5,
          random1: parseInt(Math.random() * 10),
          random2: parseInt(Math.random() * 10),
          state: '未完成'
        }
      ],
    }
  },
  methods: {
    subMT(val,id) {
      let index = this.arr.findIndex(item => item.id === id)
      let sum = this.arr[index].random1 + this.arr[index].random2
      // console.log(sum);
      val == sum ? this.arr[index].state = '正确': this.arr[index].state = '错误'
       
    }
  }

};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>